/* eslint-disable react/prop-types */
import React from 'react';
import { Form, Input, Button, message, Radio } from 'antd';
import Api from '@/api/index';
import { withRouter } from 'react-router-dom';

const { TextArea } = Input;


class TaskForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 1
        }
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                Api.createTask(values).then(res => {
                    if (res.code == 200) {
                        message.success('保存成功')
                        this.props.history.go(-1)
                    }
                })
            }
        });
    };

    onChange = e => {
        this.setState({
            value: e.target.value,
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 2,
                },
            },
        };
        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="任务名">
                    {getFieldDecorator('name', {
                        rules: [
                            {
                                required: true,
                                message: '请输入定时任务名称',
                            },
                        ],
                    })(<Input />)}
                </Form.Item>
                <Form.Item label="任务组">
                    {getFieldDecorator('group', {
                        initialValue: 1,
                        rules: [
                            {
                                required: true,
                                message: '请输入任务组',
                            },
                        ],
                    })(<Radio.Group onChange={this.onChange}>
                        <Radio value={1}>每隔*时间执行</Radio>
                        <Radio value={2}>隔*执行一次</Radio>
                        <Radio value={3}>每到*时间点执行</Radio>
                    </Radio.Group>)}
                </Form.Item>
                <Form.Item label="定时任务规则">
                    {getFieldDecorator('rules', {
                        rules: [
                            {
                                required: true,
                                message: '请输入定时规则',
                            },
                        ],
                    })(<Input />)}
                </Form.Item>
                <Form.Item label="描述">
                    {getFieldDecorator('description', {})(<TextArea row={4} placeholder="描述" />)}
                </Form.Item>
                <Form.Item {...tailFormItemLayout} style={{ marginTop: '30px', textAlign: 'center' }}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(withRouter(TaskForm));
